<template>

    <div class="ly-artilce">
        <div class="ly-artilce-item">
            <el-divider content-position="center">分类选择</el-divider>
            <tree-checkbox :data-list="catList" @change="checkNode"></tree-checkbox>
        </div>

        <el-divider content-position="center">文章列表</el-divider>
        <template v-if="dataList != null" v-for="(article,index) in dataList" v-loading="articleLoading">
            <el-row class="ly-artilce-item" :key="index">

                <el-card shadow="hover" v-if="article.labelName">
                    <el-col :md="8">
                        <div class="ly-artilce-img">
                            <el-image style="width: 100%;height: 100%;"
                                      :src="article.showImg"
                                      :z-index="index"
                                      fit="contain"
                                      :preview-src-list="articleImgList"/>
                        </div>
                    </el-col>
                    <el-col :md="16">
                        <el-button type="text" @click="showDetail(article.id)" :title="article.title"
                                   style="font-size:20px;">{{article.title}}
                        </el-button>
                        <div class="baseInfo">
                            作者：{{article.author}} <br>
                            发布时间：{{article.createTime | formatDate}}<br>
                            标签：<template v-for="(label,index) in (article.labelName.split(','))">

                                <el-link @click="$router.push({path: '/label', query: {id: label.split('-')[0], name: label.split('-')[1]}})">
                                    {{label.split('-')[1] || ''}}
                                </el-link>

                                {{index+1 != article.labelName.split(',').length?'|':''}}
                                </template><br>
                            分类：{{article.catName || ''}}
                        </div>
                        <div class="ly-artilce-content" v-html="article.content || '暂无内容，待添加...'"></div>
                    </el-col>
                </el-card>
            </el-row>
        </template>

        <template v-if="dataList == null || dataList.length == 0">
            <p> 没有内容哦！！ </p>
        </template>

        <template  v-if="dataList != null && dataList.length > 0">
            <div class="ly-page">
                <el-pagination layout="total, prev, pager, next, jumper" @current-change="refreshPageRequest"
                               :current-page="pageIndex" :page-size="pageSize"
                               :total="totalPage">
                </el-pagination>
            </div>
        </template>

    </div>
</template>

<script>
    //引入时间转换
    import {formatDate} from "@/utils/mixin.js"
    import TreeCheckbox from "@/components/TreeCheckbox"

    export default {
        data() {
            return {
                pageIndex: 1,
                pageSize: 5,
                totalPage: 0,
                dataList: [],

                articleImgList: [],

                catList: [],
                catChoose:"",
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },

                checkedKeysStr:"",

                articleLoading:false, //文章加载
            }
        },
        components:{TreeCheckbox},
        props: {
            labelId: {
                type: Number,
                default: 0
            }
        },
        methods: {
            // 获取分页数据
            findPage: function (data) {
                this.articleLoading = true;
                let pageParam = {
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                };
                if (this.labelId != 0) {
                    pageParam.labelId = this.labelId;
                }
                if (this.checkedKeysStr) {
                    pageParam.checkedKeysStr = this.checkedKeysStr;
                }
                this.$api.Info.showList(pageParam).then((data) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list
                        this.totalPage = data.page.totalCount

                        this.articleImgList = [];
                        data.page.list.forEach(item => {
                            this.articleImgList.push(item.showImg)
                        });

                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.articleLoading = false;
                }).then(data != null ? data.callback : '')
            },

            showDetail(idVal) {
                this.$router.push({path: '/show/article/detail', query: {id: idVal}})
            },
            // 换页刷新
            refreshPageRequest: function (pageIndex) {
                this.pageIndex = pageIndex
                this.findPage()
            },

            //获取分类信息
            getCatList() {
                this.$api.Category.listTree().then((data) => {
                    if (data && data.code === 0) {
                        this.catList = data.categoryTreeList
                        console.log(data);
                    }
                })
            },

            //选中分类节点是触发
            checkNode(data){
                this.checkedKeysStr = data.length>0?data.reduce((prev, cur) => prev + "," + cur):"";
                this.pageIndex = 1;
                this.findPage();
            },

        },
        mounted() {
            this.findPage();
            this.getCatList();
        },
        mixins: [formatDate]

    }

</script>

<style>

    .ly-artilce {
        margin-top: 30px;
    }
    .ly-artilce-item {
        margin-top: 20px;
    }

    .ly-artilce-img {
        width: 150px;
        height: 150px;
        padding: 10px
    }

    .ly-artilce-content {
        padding: 15px
    }

    .baseInfo {
        color: gray;
        font-size: 14px;
    }

    .ly-page {
        margin: 20px 0px;
        text-align: center;
    }

</style>